<template>
  <div class="pending-orders">
    <div class="page-header">
      <div class="header-left">
        <h2>📦 待发货订单处理中心</h2>
        <p>快速处理待发货订单，提升客户满意度</p>
      </div>
      <div class="header-stats">
        <div class="stat-item urgent">
          <span class="stat-number">{{ urgentCount }}</span>
          <span class="stat-label">紧急订单</span>
        </div>
        <div class="stat-item today">
          <span class="stat-number">{{ todayCount }}</span>
          <span class="stat-label">今日订单</span>
        </div>
        <div class="stat-item total">
          <span class="stat-number">{{ total }}</span>
          <span class="stat-label">待发货总数</span>
        </div>
      </div>
    </div>
    
    <div class="toolbar">
      <div class="toolbar-left">
        <div class="filter-group">
          <label>🔍 筛选：</label>
          <select v-model="priorityFilter" class="filter-select" @change="loadOrders">
            <option value="">全部优先级</option>
            <option value="urgent">紧急订单</option>
            <option value="today">今日订单</option>
            <option value="overdue">超时订单</option>
          </select>
          <select v-model="statusFilter" class="filter-select" @change="loadOrders">
            <option value="">全部状态</option>
            <option value="0">待付款</option>
            <option value="1">待发货</option>
            <option value="2">运输中</option>
            <option value="3">已完成</option>
            <option value="4">已取消</option>
          </select>
        </div>
      </div>
      <div class="toolbar-right">
        <div class="search-box">
          <input type="text" placeholder="🔍 搜索订单号、收货人、商品..." v-model="searchQuery" @keyup.enter="searchOrders">
          <button class="search-btn" @click="searchOrders">搜索</button>
        </div>
        <button class="btn-batch" @click="batchShip" :disabled="selectedOrders.length === 0">
          📦 批量发货 ({{ selectedOrders.length }})
        </button>
        <button class="btn-refresh" @click="loadOrders">🔄 刷新</button>
      </div>
    </div>
      
    <div class="content-section">
      <div class="loading" v-if="loading">
        <div class="loading-spinner">📦</div>
        <p>正在加载待发货订单...</p>
      </div>
      
      <div class="orders-container" v-else>
        <div v-if="orders.length === 0" class="no-orders">
          <div class="no-orders-icon">📭</div>
          <h3>暂无待发货订单</h3>
          <p>所有订单都已处理完毕</p>
        </div>
        
        <div v-else class="orders-grid">
          <div v-for="order in orders" :key="order.orderId" :class="['shipping-card', getPriorityClass(order)]">
            <!-- 选择框和优先级标识 -->
            <div class="card-header">
              <div class="card-select">
                <input type="checkbox" :value="order.orderId" v-model="selectedOrders" :id="'order-' + order.orderId">
                <label :for="'order-' + order.orderId"></label>
              </div>
              <div class="priority-badge" v-if="isUrgent(order)">🔥 紧急</div>
              <div class="priority-badge today" v-else-if="isToday(order)">⏰ 今日</div>
              <div class="priority-badge overdue" v-else-if="isOverdue(order)">⚠️ 超时</div>
              <div class="order-status">
                <span :class="['status-tag', getStatusClass(order.status)]">{{ getStatusText(order.status) }}</span>
              </div>
            </div>
            
            <!-- 订单基本信息 -->
            <div class="card-main">
              <div class="order-info">
                <h3 class="order-number">📋 {{ order.orderSn }}</h3>
                <div class="order-time">
                  <span class="time-label">下单时间：</span>
                  <span class="time-value">{{ formatDate(order.createdAt) }}</span>
                </div>
                <div class="order-amount">
                  <span class="amount-label">订单金额：</span>
                  <span class="amount-value">¥{{ order.totalAmount }}</span>
                </div>
              </div>
              
              <!-- 收货信息 -->
              <div class="shipping-info">
                <h4>📍 收货信息</h4>
                <div class="customer-details">
                  <div class="customer-name">👤 {{ order.receiverName }}</div>
                  <div class="customer-phone">📞 {{ order.receiverPhone }}</div>
                  <div class="customer-address" :title="order.receiverAddress">
                    📍 {{ order.receiverAddress }}
                  </div>
                </div>
              </div>
              
              <!-- 商品信息 -->
              <div class="products-section">
                <h4>📦 商品清单</h4>
                <div class="products-list">
                  <div v-for="(item, index) in order.orderItems" :key="index" class="product-row">
                    <img v-if="item.productImage" :src="getImageUrl(item.productImage)" :alt="item.productName" class="product-thumb">
                    <div class="product-info">
                      <div class="product-name">{{ item.productName }}</div>
                      <div class="product-details">
                        <span class="sku">SKU: {{ item.productSku }}</span>
                        <span class="quantity">×{{ item.quantity }}</span>
                        <span class="price">¥{{ item.productPrice }}</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 操作按钮 -->
            <div class="card-actions">
              <button v-if="order.status === 1" class="btn-primary ship-btn" @click="shipOrder(order)">
                🚚 立即发货
              </button>
              <button v-if="order.status === 0" class="btn-secondary" @click="contactCustomer(order)">
                📞 联系客户
              </button>
              <button class="btn-outline" @click="viewOrderDetail(order)">
                👁️ 查看详情
              </button>
              <button v-if="order.status <= 1" class="btn-danger" @click="cancelOrder(order)">
                ❌ 取消订单
              </button>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 分页 -->
      <div class="pagination" v-if="totalPages > 1">
        <button @click="changePage(currentPage - 1)" :disabled="currentPage <= 1">上一页</button>
        <span>第 {{ currentPage }} 页，共 {{ totalPages }} 页</span>
        <button @click="changePage(currentPage + 1)" :disabled="currentPage >= totalPages">下一页</button>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'PendingOrders',
  data() {
    return {
      searchQuery: '',
      statusFilter: '',
      priorityFilter: '',
      selectedOrders: [],
      orders: [],
      loading: false,
      currentPage: 1,
      pageSize: 10,
      totalPages: 0,
      total: 0,
      urgentCount: 0,
      todayCount: 0,
      backendBaseUrl: 'http://localhost:8083'
    };
  },
  mounted() {
    this.loadOrders();
  },
  methods: {
    async loadOrders() {
      this.loading = true;
      try {
        let url = `${this.backendBaseUrl}/api/v1/orders/list?page=${this.currentPage}&size=${this.pageSize}`;
        
        if (this.statusFilter) {
          url = `${this.backendBaseUrl}/api/v1/orders/status/${this.statusFilter}`;
        }
        
        const response = await axios.get(url);
        
        if (response.data.success) {
          if (this.statusFilter) {
            // 状态筛选返回的是数组
            this.orders = response.data.data || [];
            this.total = this.orders.length;
            this.totalPages = 1;
          } else {
            // 分页查询返回的是对象
            const data = response.data.data;
            this.orders = data.orders || [];
            this.total = data.total || 0;
            this.totalPages = data.totalPages || 0;
            this.currentPage = data.page || 1;
          }
          
          // 应用优先级筛选
          if (this.priorityFilter) {
            this.orders = this.orders.filter(order => {
              switch (this.priorityFilter) {
                case 'urgent':
                  return this.isUrgent(order);
                case 'today':
                  return this.isToday(order);
                case 'overdue':
                  return this.isOverdue(order);
                default:
                  return true;
              }
            });
          }
          
          // 计算统计数据
          this.calculateStats();
        } else {
          console.error('获取订单列表失败:', response.data.message);
          this.orders = [];
        }
      } catch (error) {
        console.error('获取订单列表失败:', error);
        this.orders = [];
      } finally {
        this.loading = false;
      }
    },
    
    calculateStats() {
      this.urgentCount = this.orders.filter(order => this.isUrgent(order)).length;
      this.todayCount = this.orders.filter(order => this.isToday(order)).length;
    },
    
    isUrgent(order) {
      // 订单金额超过1000元或者下单超过2天的待发货订单视为紧急
      const orderDate = new Date(order.createdAt);
      const now = new Date();
      const daysDiff = (now - orderDate) / (1000 * 60 * 60 * 24);
      
      return order.status === 1 && (order.totalAmount > 1000 || daysDiff > 2);
    },
    
    isToday(order) {
      const orderDate = new Date(order.createdAt);
      const today = new Date();
      return orderDate.toDateString() === today.toDateString();
    },
    
    isOverdue(order) {
      // 下单超过3天的待发货订单视为超时
      const orderDate = new Date(order.createdAt);
      const now = new Date();
      const daysDiff = (now - orderDate) / (1000 * 60 * 60 * 24);
      
      return order.status === 1 && daysDiff > 3;
    },
    
    getPriorityClass(order) {
      if (this.isUrgent(order)) return 'urgent';
      if (this.isToday(order)) return 'today';
      if (this.isOverdue(order)) return 'overdue';
      return 'normal';
    },
    
    async batchShip() {
      if (this.selectedOrders.length === 0) {
        alert('请选择要发货的订单');
        return;
      }
      
      if (!confirm(`确认批量发货 ${this.selectedOrders.length} 个订单吗？`)) {
        return;
      }
      
      try {
        const promises = this.selectedOrders.map(orderId => {
          return axios.put(`${this.backendBaseUrl}/api/v1/orders/${orderId}/status`, {
            status: 2 // 运输中
          });
        });
        
        await Promise.all(promises);
        alert('批量发货成功！');
        this.selectedOrders = [];
        this.loadOrders();
      } catch (error) {
        console.error('批量发货失败:', error);
        alert('批量发货失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    contactCustomer(order) {
      // 联系客户功能
      const message = `您好，您的订单 ${order.orderSn} 正在处理中，如有疑问请联系客服。`;
      alert(`联系客户功能：\n客户：${order.receiverName}\n电话：${order.receiverPhone}\n消息：${message}`);
    },
    
    async searchOrders() {
      if (!this.searchQuery.trim()) {
        this.loadOrders();
        return;
      }
      
      this.loading = true;
      try {
        const response = await axios.get(`${this.backendBaseUrl}/api/v1/orders/search`, {
          params: {
            keyword: this.searchQuery,
            status: this.statusFilter || null,
            page: this.currentPage,
            size: this.pageSize
          }
        });
        
        if (response.data.success) {
          const data = response.data.data;
          this.orders = data.orders || [];
          this.total = data.total || 0;
          this.totalPages = data.totalPages || 0;
          this.currentPage = data.page || 1;
        } else {
          console.error('搜索订单失败:', response.data.message);
          this.orders = [];
        }
      } catch (error) {
        console.error('搜索订单失败:', error);
        this.orders = [];
      } finally {
        this.loading = false;
      }
    },
    
    async shipOrder(order) {
      if (!confirm(`确认发货订单 ${order.orderSn} 吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/status`, {
          status: 2 // 运输中
        });
        
        if (response.data.success) {
          alert('发货成功！');
          this.loadOrders();
        } else {
          alert('发货失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('发货失败:', error);
        alert('发货失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    async confirmOrder(order) {
      if (!confirm(`确认收货订单 ${order.orderSn} 吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/confirm`);
        
        if (response.data.success) {
          alert('确认收货成功！');
          this.loadOrders();
        } else {
          alert('确认收货失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('确认收货失败:', error);
        alert('确认收货失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    async cancelOrder(order) {
      if (!confirm(`确认取消订单 ${order.orderSn} 吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/cancel`);
        
        if (response.data.success) {
          alert('订单取消成功！');
          this.loadOrders();
        } else {
          alert('订单取消失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('订单取消失败:', error);
        alert('订单取消失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    async processRefund(order) {
      if (!confirm(`确认处理订单 ${order.orderSn} 的退货申请吗？`)) {
        return;
      }
      
      try {
        const response = await axios.put(`${this.backendBaseUrl}/api/v1/orders/${order.orderId}/refund/process`);
        
        if (response.data.success) {
          alert('退货处理成功！');
          this.loadOrders();
        } else {
          alert('退货处理失败: ' + response.data.message);
        }
      } catch (error) {
        console.error('退货处理失败:', error);
        alert('退货处理失败: ' + (error.response?.data?.message || '网络错误'));
      }
    },
    
    viewOrderDetail(order) {
      // 这里可以跳转到订单详情页面或打开模态框
      alert(`查看订单详情: ${order.orderSn}`);
    },
    
    changePage(page) {
      if (page < 1 || page > this.totalPages) {
        return;
      }
      this.currentPage = page;
      if (this.searchQuery.trim()) {
        this.searchOrders();
      } else {
        this.loadOrders();
      }
    },
    
    formatDate(dateString) {
      if (!dateString) return '';
      const date = new Date(dateString);
      return date.toLocaleString('zh-CN');
    },
    
    getStatusText(status) {
      const statusMap = {
        0: '待付款',
        1: '待发货',
        2: '运输中',
        3: '已完成',
        4: '已取消',
        5: '申请退货',
        6: '已退货'
      };
      return statusMap[status] || '未知状态';
    },
    
    getStatusClass(status) {
      const classMap = {
        0: 'pending-payment',
        1: 'pending-shipment',
        2: 'shipping',
        3: 'completed',
        4: 'cancelled',
        5: 'refund-applied',
        6: 'refunded'
      };
      return classMap[status] || 'unknown';
    },
    
    getImageUrl(imagePath) {
      if (!imagePath) return '';
      if (imagePath.startsWith('http')) {
        return imagePath;
      }
      return this.backendBaseUrl + imagePath;
    }
  }
};
</script>

<style scoped>
.pending-orders {
  padding: 0;
  background: #f8fafc;
  min-height: 100vh;
}

/* 页面头部 */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  color: white;
  box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
}

.header-left h2 {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-left p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.header-stats {
  display: flex;
  gap: 24px;
}

.stat-item {
  text-align: center;
  padding: 16px 20px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.stat-number {
  display: block;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 12px;
  opacity: 0.9;
}

.stat-item.urgent .stat-number {
  color: #ff6b6b;
}

.stat-item.today .stat-number {
  color: #4ecdc4;
}

.stat-item.total .stat-number {
  color: #ffe66d;
}

/* 工具栏 */
.toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 20px 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
  flex-wrap: wrap;
  gap: 16px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.filter-group label {
  font-weight: 600;
  color: #4a5568;
  font-size: 14px;
}

.filter-select {
  padding: 10px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  transition: all 0.3s ease;
  min-width: 140px;
}

.filter-select:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-box {
  position: relative;
  display: flex;
  align-items: center;
}

.search-box input {
  padding: 10px 16px;
  border: 2px solid #e2e8f0;
  border-radius: 8px 0 0 8px;
  font-size: 14px;
  width: 280px;
  transition: all 0.3s ease;
}

.search-box input:focus {
  outline: none;
  border-color: #667eea;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.search-btn {
  padding: 10px 16px;
  background: #667eea;
  color: white;
  border: 2px solid #667eea;
  border-radius: 0 8px 8px 0;
  cursor: pointer;
  transition: all 0.3s ease;
  font-size: 14px;
  font-weight: 500;
}

.search-btn:hover {
  background: #5a67d8;
  border-color: #5a67d8;
}

.btn-batch {
  padding: 10px 20px;
  background: #48bb78;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-batch:hover:not(:disabled) {
  background: #38a169;
  transform: translateY(-1px);
}

.btn-batch:disabled {
  background: #a0aec0;
  cursor: not-allowed;
}

.btn-refresh {
  padding: 10px 16px;
  background: #4299e1;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.btn-refresh:hover {
  background: #3182ce;
  transform: translateY(-1px);
}

/* 内容区域 */
.content-section {
  background: transparent;
}

.loading {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.loading-spinner {
  font-size: 48px;
  margin-bottom: 16px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.no-orders {
  text-align: center;
  padding: 80px 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.no-orders-icon {
  font-size: 64px;
  margin-bottom: 16px;
}

.no-orders h3 {
  margin: 0 0 8px 0;
  color: #4a5568;
  font-size: 20px;
}

.no-orders p {
  margin: 0;
  color: #718096;
  font-size: 14px;
}

/* 订单网格 */
.orders-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 20px;
}

/* 订单卡片 */
.shipping-card {
  background: white;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  transition: all 0.3s ease;
  border: 2px solid transparent;
}

.shipping-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.shipping-card.urgent {
  border-color: #ff6b6b;
  box-shadow: 0 4px 20px rgba(255, 107, 107, 0.2);
}

.shipping-card.today {
  border-color: #4ecdc4;
  box-shadow: 0 4px 20px rgba(78, 205, 196, 0.2);
}

.shipping-card.overdue {
  border-color: #ffa726;
  box-shadow: 0 4px 20px rgba(255, 167, 38, 0.2);
}

/* 卡片头部 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #f7fafc;
  border-bottom: 1px solid #e2e8f0;
}

.card-select {
  position: relative;
}

.card-select input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.priority-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  background: #ff6b6b;
  color: white;
}

.priority-badge.today {
  background: #4ecdc4;
}

.priority-badge.overdue {
  background: #ffa726;
}

.status-tag {
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.status-tag.pending-payment {
  background: #fed7d7;
  color: #c53030;
}

.status-tag.pending-shipment {
  background: #fef5e7;
  color: #d69e2e;
}

.status-tag.shipping {
  background: #bee3f8;
  color: #2b6cb0;
}

.status-tag.completed {
  background: #c6f6d5;
  color: #2f855a;
}

.status-tag.cancelled {
  background: #fed7d7;
  color: #c53030;
}

/* 卡片主体 */
.card-main {
  padding: 20px;
}

.order-info {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.order-number {
  margin: 0 0 12px 0;
  font-size: 18px;
  font-weight: 700;
  color: #2d3748;
}

.order-time, .order-amount {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.time-label, .amount-label {
  color: #718096;
  font-size: 14px;
}

.time-value, .amount-value {
  font-weight: 600;
  color: #2d3748;
  font-size: 14px;
}

.amount-value {
  color: #48bb78;
  font-size: 16px;
}

/* 收货信息 */
.shipping-info {
  margin-bottom: 20px;
}

.shipping-info h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

.customer-details {
  background: #f7fafc;
  padding: 12px 16px;
  border-radius: 8px;
  border-left: 4px solid #667eea;
}

.customer-name, .customer-phone, .customer-address {
  margin-bottom: 6px;
  font-size: 14px;
  color: #4a5568;
}

.customer-address {
  margin-bottom: 0;
  line-height: 1.4;
}

/* 商品信息 */
.products-section {
  margin-bottom: 20px;
}

.products-section h4 {
  margin: 0 0 12px 0;
  font-size: 16px;
  font-weight: 600;
  color: #2d3748;
}

.products-list {
  max-height: 200px;
  overflow-y: auto;
}

.product-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f0;
}

.product-row:last-child {
  border-bottom: none;
}

.product-thumb {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid #e2e8f0;
}

.product-info {
  flex: 1;
}

.product-name {
  font-weight: 600;
  color: #2d3748;
  margin-bottom: 4px;
  font-size: 14px;
}

.product-details {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: #718096;
}

.sku, .quantity, .price {
  padding: 2px 6px;
  background: #edf2f7;
  border-radius: 4px;
}

/* 操作按钮 */
.card-actions {
  display: flex;
  gap: 8px;
  padding: 16px 20px;
  background: #f7fafc;
  border-top: 1px solid #e2e8f0;
  flex-wrap: wrap;
}

.btn-primary, .btn-secondary, .btn-outline, .btn-danger {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 80px;
}

.btn-primary {
  background: #48bb78;
  color: white;
}

.btn-primary:hover {
  background: #38a169;
  transform: translateY(-1px);
}

.btn-secondary {
  background: #4299e1;
  color: white;
}

.btn-secondary:hover {
  background: #3182ce;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: #4a5568;
  border: 1px solid #e2e8f0;
}

.btn-outline:hover {
  background: #f7fafc;
  border-color: #cbd5e0;
}

.btn-danger {
  background: #f56565;
  color: white;
}

.btn-danger:hover {
  background: #e53e3e;
  transform: translateY(-1px);
}

/* 分页 */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 32px;
  padding: 20px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.pagination button {
  padding: 10px 20px;
  background: #667eea;
  color: white;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.pagination button:hover:not(:disabled) {
  background: #5a67d8;
  transform: translateY(-1px);
}

.pagination button:disabled {
  background: #a0aec0;
  cursor: not-allowed;
  transform: none;
}

.pagination span {
  color: #4a5568;
  font-size: 14px;
  font-weight: 500;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
  }
  
  .header-stats {
    width: 100%;
    justify-content: space-between;
  }
  
  .toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  
  .toolbar-left, .toolbar-right {
    justify-content: center;
  }
  
  .orders-grid {
    grid-template-columns: 1fr;
  }
  
  .search-box input {
    width: 200px;
  }
}
</style>